<!--
 * @Description: 定制窗幔
 *
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-05-15 10:58:42
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/room/decorate/index.vue
-->
<template>
  <el-collapse-item title="定制窗幔" name="2" disabled>
    <template slot="title">
      <i
        class="el-icon-circle-plus-outline mr10 expand"
        @click="handleExpand"
      ></i>
      定制窗幔
      <el-button
        type="primary"
        plain
        size="mini"
        icon="el-icon-plus"
        class="ml10"
        @click.stop="handleAddDecorate()"
      >
        添加
      </el-button>
      <!-- <el-button
        type="success"
        plain
        size="mini"
        icon="el-icon-plus"
        class="ml10"
        v-if="data.state !== '3'"
        @click.stop="handleAddBatch()"
      >
        一键保存
      </el-button> -->
    </template>
    <el-form ref="form" :model="form" :rules="rules" inline size="mini">
      <el-table
        v-loading="loading"
        :data="form.list"
        :max-height="500"
        size="mini"
        border
      >
        <el-table-column
          label="号"
          type="index"
          align="center"
          width="40"
        ></el-table-column>
        <el-table-column label="房间" align="center" prop="name1" width="160">
          <template slot-scope="{ row, $index }">
            <el-form-item prop="name">
              <el-select
                style="width: 100%"
                v-model="row.room.name"
                filterable
                allow-create
                default-first-option
                placeholder="请选择房间名称"
              >
                <el-option
                  v-for="item in ROOMS"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="品名" align="center" prop="name" width="160">
          <template slot-scope="{ row, $index }">
            <el-form-item prop="name">
              <div
                @click="
                  () => {
                    part = {
                      show: true,
                      index: $index,
                    };
                  }
                "
              >
                <el-input
                  style="width: 100%"
                  v-model="row.name"
                  type="text"
                  readonly
                  placeholder="请输入"
                >
                </el-input>
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="宽" align="center" prop="wright" min-width="70">
          <template slot-scope="{ row }">
            <el-form-item prop="wright">
              <el-input
                style="width: 100%"
                v-model="row.wright"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="高" align="center" prop="height" min-width="70">
          <template slot-scope="{ row }">
            <el-form-item prop="height">
              <el-input
                style="width: 100%"
                v-model="row.height"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="单价"
          align="center"
          prop="unitPrice"
          min-width="70"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="unitPrice">
              <el-input
                style="width: 100%"
                v-model="row.unitPrice"
                type="text"
                disabled
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="固定方式"
          align="center"
          prop="fixedMethod"
          width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="fixedMethod">
              <el-select
                v-model="row.fixedMethod"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in methodList"
                  :key="item.mdWindowCurtainFacilitiesId"
                  :label="item.name"
                  :value="item.mdWindowCurtainFacilitiesId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column
          label="数量"
          align="center"
          prop="number"
          min-width="70"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="number">
              <el-input
                style="width: 100%"
                v-model="row.number"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="小计"
          align="center"
          prop="subtotal"
          min-width="60"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="subtotal">
              <div
                @click="
                  () => {
                    subtotal = {
                      show: true,
                      data: {
                        ...row,
                      },
                    };
                  }
                "
              >
                <span style="cursor: pointer; font-size: 20px"
                  >{{ row.subtotal
                  }}{{ row.updataPrice ? `(${row.updataPrice})` : "" }}</span
                >
                <!-- <el-input
                  style="width: 100%"
                  v-model="row.subtotal"
                  type="text"
                  placeholder="请输入"
                  readonly
                /> -->
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="图" align="center" prop="picture" width="120">
          <template slot-scope="{ row, $index }">
            <!-- <el-form-item prop="picture">
              <image-upload
                v-model="row.picture"
                :isShowTip="false"
                :limit="1"
              />
            </el-form-item> -->
            <div
              @click="
                () => {
                  image = {
                    show: true,
                    data: {
                      ...row,
                    },
                    index: $index,
                  };
                }
              "
            >
              {{ row.picture ? getImageNum(row.picture) : "空" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="加工备注"
          align="center"
          prop="processingRemarks"
          width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="processingRemarks">
              <el-input
                style="width: 100%"
                v-model="row.processingRemarks"
                type="textarea"
                autosize
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column
          label="明细"
          align="center"
          prop="detail"
          min-width="120"
        >
          <template slot-scope="{ row, $index }">
            <el-form-item prop="detail">
              <div
                style="width: 100%"
                @click="
                  () => {
                    info = {
                      show: true,
                      data: {
                        ...row,
                      },
                      index: $index,
                    };
                  }
                "
              >
                <el-input
                  style="width: 100%"
                  v-model.trim="row.detail"
                  type="textarea"
                  autosize
                  placeholder="请输入"
                  readonly
                />
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="余料"
          align="center"
          prop="oddments"
          width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="oddments">
              <el-select v-model="row.oddments" clearable placeholder="请选择">
                <el-option label="无" value="0"> </el-option>
                <el-option label="寄回" value="1"> </el-option>
                <el-option label="加工" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="180"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="
                () => {
                  if (data.state === '3') {
                    change = {
                      show: true,
                      data: scope.row,
                      list: [
                        {
                          name: `修改 定制窗幔 ${scope.$index + 1}号`,
                          address: '',
                        },
                      ],
                    };
                  } else {
                    handleSave(scope.row);
                  }
                }
              "
              v-hasPermi="['md:order:edit']"
              >保存</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              :disabled="data.state === '3'"
              @click="handleCopyClick(scope.row)"
              >复制</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row, scope.$index)"
              v-hasPermi="['md:order:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <!-- 选择品名 -->
    <part-view
      v-if="part.show"
      :show.sync="part.show"
      v-bind="part"
      @on-change="handlePartChange"
    ></part-view>
    <!-- 房间 -->
    <room-view
      v-if="room.show"
      :show.sync="room.show"
      v-bind="room"
      @on-change="handleRoomChange"
    ></room-view>

    <!-- 复制 -->
    <copy-view
      v-if="copy.show"
      :show.sync="copy.show"
      v-bind="copy"
      @update="setData"
    ></copy-view>

    <!-- 明细 -->
    <info-detail
      v-if="info.show"
      :show.sync="info.show"
      v-bind="info"
      @on-change="handleInfoChange"
    ></info-detail>

    <!-- 图片 -->
    <image-view
      v-if="image.show"
      :show.sync="image.show"
      v-bind="image"
      @on-change="handleImageChange"
    ></image-view>

    <!-- 价格明细 -->
    <subtotal-view
      v-if="subtotal.show"
      :show.sync="subtotal.show"
      v-bind="subtotal"
      @update="getlistOrderCustomWindowCurtain()"
    ></subtotal-view>

    <!-- 变更单 -->
    <change-view
      v-if="change.show"
      :show.sync="change.show"
      v-bind="change"
      @on-change="handleSave"
    ></change-view>
  </el-collapse-item>
</template>

<script>
import {
  listOrderCustomWindowCurtain,
  getOrderCustomWindowCurtain,
  addOrderCustomWindowCurtain,
  updateOrderCustomWindowCurtain,
  delOrderCustomWindowCurtain,
  batchEditOrderCustomWindowCurtain,
} from "@/api/asc/decorate";
import { listFacilities } from "@/api/process/facilities";
import { listMachining } from "@/api/process/machine";
import { listMethod } from "@/api/process/way";
import PartView from "../../add/decorate.vue";
import ZoneView from "../../add/zone.vue";
import RoomView from "../../add/room.vue";
import CopyView from "../../add/copy.vue";
import StrapsView from "../straps";
import InfoDetail from "../../add/infoDetail2.vue";
import ImageView from "../../add/image.vue";
import SubtotalView from "./subtotal.vue";
import ChangeView from "../../add/change.vue";
import { ROOMS } from "../configure";
const FORM = {
  orderCustomWindowCurtainId: null,
  orderHighEndCustomizationId: null,
  orderId: null,
  customCurtainId: null,
  name: null,
  wright: null,
  height: null,
  unitPrice: null,
  fixedMethod: null,
  processingMethod: null,
  wallWidth: null,
  wallHeight: null,
  section: null,
  otherSection: null,
  magnification: null,
  direction: "0",
  number: "1",
  subtotal: null,
  picture: null,
  processingRemarks: null,
  oddments: "0",
  detail: null,
  pid: null,
  type: null,
  room: {
    name: "",
  },
};
export default {
  dicts: ["order_curtain_section"],
  components: {
    PartView,
    ZoneView,
    StrapsView,
    RoomView,
    CopyView,
    InfoDetail,
    ImageView,
    SubtotalView,
    ChangeView,
  },
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      ROOMS,
      activeNames: "1",
      loading: false,
      room: {
        show: false,
        index: 0,
        data: null,
      },
      zone: {
        show: false,
        index: 0,
        data: null,
      },
      part: {
        show: false,
        index: 0,
      },
      straps: {
        show: false,
        data: null,
      },
      subtotal: {
        show: false,
        data: null,
      },
      info: {
        show: false,
        data: null,
        index: 0,
      },
      image: {
        show: false,
        data: null,
        index: 0,
      },
      form: {
        list: [{ ...FORM }],
      },
      copy: {
        show: false,
        data: null,
      },
      change: {
        show: false,
        data: null,
        list: [],
      },
      oldList: [], // 缓存历史数据
      rules: {},
      methodList: [],
      machiningList: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.getlistOrderCustomWindowCurtain();
    this.getMethodList();
  },
  methods: {
    async getlistOrderCustomWindowCurtain() {
      const { rows } = await listOrderCustomWindowCurtain({
        pageNum: 1,
        pageSize: 5000,
        orderId: this.data?.proOrderId,
      });
      this.form.list = rows?.map((e) => {
        return {
          ...e,
          fixedMethod: +e.fixedMethod || null,
        };
      });
      this.oldList = JSON.parse(JSON.stringify(this.form.list));
      this.$emit("on-refresh-price");
      this.form.list?.length && this.$emit("active", "2");
    },
    getMethodList() {
      listFacilities({
        pageNum: 1,
        pageSize: 5000,
        type: "0",
      }).then(({ rows }) => {
        this.methodList = rows;
        // console.log(rows);
      });
    },
    // 判断图片数量
    getImageNum(images) {
      const list = images?.split(",");
      return `${list?.length}张`;
    },
    handleImageChange(data) {
      const row = this.form.list[this.image.index];
      row.picture = data.picture;
      this.$set(this.form.list, this.image.index, row);
    },
    handlePartChange(part, productFabrics) {
      switch (part.types) {
        case "gd": {
          const row = this.form.list[this.part.index];
          row.name = part.name;
          row.highEndCustomizationId = part.highEndCustomizationId;
          //   row.orderHighEndCustomizationId = part.highEndCustomizationId;
          row.customWindowCurtainId = null;
          row.unitPrice = part.wholesalePrice;
          row.productFabrics = productFabrics?.map((e) => {
            return {
              ...e,
              type: "1",
            };
          });
          row.detail = productFabrics?.map((e) => e.name)?.join("|");
          this.$set(this.form.list, this.part.index, row);
          break;
        }
        case "curtain": {
          const row = this.form.list[this.part.index];
          row.name = part.name;
          row.customWindowCurtainId = part.customWindowCurtainId;
          //   row.customCurtainId = part.customCurtainId;
          row.highEndCustomizationId = null;
          row.unitPrice = part.wholesalePrice;
          row.productFabrics = productFabrics;
          row.detail = productFabrics?.map((e) => e.name)?.join("|");
          this.$set(this.form.list, this.part.index, row);
          break;
        }
        default:
          break;
      }
    },

    handleInfoChange(list) {
      const row = this.form.list[this.info.index];
      row.productFabrics = list;
      row.detail = list?.map((e) => e.name)?.join("|");
      this.$set(this.form.list, this.info.index, row);
    },

    handleZoneChange(data) {
      const row = this.form.list[this.zone.index];
      this.$set(this.form.list, this.zone.index, {
        ...row,
        ...data,
      });
    },
    handleChange(val) {
      console.log(val);
    },
    // 添加一条
    handleAddDecorate() {
      this.form.list.push({
        ...FORM,
        room: {
          name: "",
        },
      });
      this.$emit("active", "2");
    },
    handleExpand() {
      this.$emit("active", "2", "1");
    },
    // 批量保存
    handleAddBatch() {
      if (!this.form.list?.length) return;
      const params = this.form.list?.map((e) => {
        return {
          ...e,
          orderId: this.data?.proOrderId,
        };
      });
      this.loading = true;
      batchEditOrderCustomWindowCurtain(params)
        .then((response) => {
          this.$modal.msgSuccess("保存成功");
          this.getlistOrderCustomWindowCurtain();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 保存
    handleSave(row) {
      const params = {
        ...row,
        orderId: this.data?.proOrderId,
        state:0,
      };
      this.loading = true;
      if (params.orderCustomWindowCurtainId != null) {
        updateOrderCustomWindowCurtain(params)
          .then(async (response) => {
            this.$modal.msgSuccess("修改成功");
            this.loading = false;

            const item = this.oldList.find(
              (e) =>
                e.orderCustomWindowCurtainId ===
                params.orderCustomWindowCurtainId
            );

            await this.getlistOrderCustomWindowCurtain();

            const item1 = this.form.list.find(
              (e) =>
                e.orderCustomWindowCurtainId ===
                params.orderCustomWindowCurtainId
            );

            if (this.data.state === "3") {
              this.$emit(
                "on-submit",
                [item, item1],
                "1",
                item1,
                this.change.list?.[0].name || "",
                "1"
              );
            }
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        addOrderCustomWindowCurtain(params)
          .then(async (response) => {
            this.$modal.msgSuccess("新增成功");
            await this.getlistOrderCustomWindowCurtain();
            const item1 = this.form.list.find(
              (e) => e.orderCustomWindowCurtainId === response.data
            );

            if (this.data.state === "3") {
              this.$emit(
                "on-submit",
                [item1],
                "1",
                item1,
                this.change.list?.[0].name || "",
                "0"
              );
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row, index) {
      if (row.orderCustomWindowCurtainId) {
        const orderCustomWindowCurtainIds = row.orderCustomWindowCurtainId;
        this.$modal
          .confirm('是否确认删除"' + row.name + '"的数据项？')
          .then(function () {
            return delOrderCustomWindowCurtain(orderCustomWindowCurtainIds);
          })
          .then(() => {
            this.getlistOrderCustomWindowCurtain();
            this.$modal.msgSuccess("删除成功");
            if (this.data.state === "3") {
              this.$emit(
                "on-submit",
                [row],
                "1",
                row,
                `删除 定制窗幔 ${index + 1}号`,
                "2"
              );
            }
          })
          .catch(() => {});
      } else {
        this.form.list?.splice(index, 1);
      }
    },
    // 房间
    handleRoomChange(data) {
      const row = this.form.list[this.room.index];
      this.$set(this.form.list, this.room.index, {
        ...row,
        room: {
          ...data,
          orderId: this.data?.proOrderId,
          productId: row.orderCustomWindowCurtainId || "",
          type: "1",
        },
      });
    },
    // 复制
    handleCopyClick(data) {
      this.copy = {
        show: true,
        data: {
          ...data,
        },
      };
    },
    // 复制回调
    setData(list) {
      this.form.list = [
        ...this.form.list,
        ...list?.map((e) => {
          return {
            ...e,
            room: {
              height: e.room.height,
              name: e.room.name,
              orderId: e.room.orderId,
              picture: e.room.picture,
              productId: "",
              remark: e.room.remark,
              type: e.room.type,
              width: e.room.width,
            },
            orderCustomWindowCurtainId: null,
          };
        }),
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .cell {
    padding-left: 4px;
    padding-right: 4px;
  }
  // .el-form-item {
  //   width: 100%;
  //   .el-form-item__content {
  //     width: 100%;
  //   }
  // }
}
.expand {
  cursor: pointer;
}

::v-deep {
  .el-table--border,
  .el-table--group {
    border: 1px solid rgb(150, 150, 150) !important;
  }
  /**
改变表格内竖线颜色
 */
  .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-right: 1px solid rgb(150, 150, 150) !important;
  }
  /**
改变表格内行线颜色
 */
  .el-table td,
  .el-table th.is-leaf,
  .el-table__cell {
    border-bottom: 1px solid rgb(150, 150, 150) !important;
  }
}
</style>
